const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
const glob = require('glob-all')
const PurifyCss = require('purifycss-webpack')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlInlineChunkPlugin = require('html-webpack-inline-chunk-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const extractCss = new ExtractTextWebpackPlugin({
  filename: 'css/[name]-bundle-[hash:5].css'
})


module.exports = {
  // 使用webpack启动dev时，如果mode不是development，会一直打包刷新
  // mode: 'development', // production , development
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/', // 这里指定根目录来确报css中的img与html中的img可以访问到图片资源
    // publicPath: './dist/',
    filename: '[name]-bundle-[hash:5].js',
    chunkFilename: '[name]-chunk-[hash:5].js'
  },
  // node_modules/.bin/webpack-dev-server --open
  devServer: {
    // inline: false, //  iframe 模式
    port: 9001,
    hot: true,
    // historyApiFallback: true, // 任意的 404 响应都可能需要被替代为 index.html
    // 实质就是connect-history-api-fallback
    historyApiFallback: {
      rewrites: [
        // {
        //   from: '/pages/a', // 重定向功能
        //   to: '/pages/a.html'
        // },
        {
          from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/, // 重定向功能
          to: function(context) {
            // console.log(context)
            return '/' + context.match[1] + context.match[2] + '.html'
          }
        }
      ]
    },
    // http-proxy-middleware
    proxy: {
      '/': {
        target: 'https://m.weibo.cn',
        changeOrigin: true,
        // 查看代理请求的相关日志信息
        logLevel: 'debug',
        pathRewrite: {
          '^/comments': '/api/comments' // 重定向请求路径，将/api为首的请求转到/api/comments
        },
        headers: {
          Cookie: ''
        }
      }
    }
  },
  resolve: {
    alias: {
      // 指定解析文件夹别名，jquery后面的$表示精确匹配
      jquery$: path.resolve(__dirname, 'src/libs/jquery.min.js')
    }
  },
  module: {
    rules: [
      // {
      //   test: /\.js$/,
      //   use: [
      //     {
      //       loader: 'babel-loader',
      //       options: {
      //         presets: ['env']
      //       }
      //     }
      //   ]
      // },
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              singleton: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              // minimize: true,
              // modules: true, // 启用css-modules
              localIdentName: '[path][name]_[local]--[hash:bases64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                // 合并图片，spritecss
                require('postcss-sprites')({
                  spritePath: 'dist/assets/imgs/sprites',
                  retina: true // 设置苹果等手机设备的2倍图片问题, 对应的图片名称后面要加@2x
                }),
                require('postcss-cssnext')()
              ]
            }
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // limit: 100000
              name: '[name]-[hash:5].[ext]',
              limit: 10000, // 大于10kb的图片，直接只用file-loader处理
              // publicPath: '../assets/imgs/sprites',
              // outputPath: './',
              // outputPath: '/dist',
              outputPath: 'assets/imgs/',
              // useRelativePath: true
            }
          },
          {
            loader: 'img-loader',
            options: {
              pngquant: {
                quality: "80"
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            // limit: 100000
            name: '[name]-[hash:5].min.[ext]',
            limit: 10000, // 大于10kb的图片，直接只用file-loader处理
            // publicPath: '../assets/imgs/sprites',
            outputPath: './css',
            // useRelativePath: true
          }
        }]
      },
      {
        // 可以替换ProvidePlugin
        test: path.resolve(__dirname, 'src/app.js'),
        use: [{
          loader: 'imports-loader',
          options: {
            $: 'jquery'
          }
        }]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
              removeComments: false,
              collapseWhitespace: false,
              // root: path.resolve(__dirname, ''),
              attrs: ['img:src', 'img:data-src']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    extractCss,
    // new ExtractTextWebpackPlugin({
    //   filename: '[name].min.css',
    //   allChunks: false
    // }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
      // inject: false,
      //指定生成的js文件是在head里还是在body里面,不写默认在body里面
      // inject: 'head',
      title: '',
      chunks: ['app'], // 没有chunks时，默认会将所有与entry相关的chunks都插入到页面中，指定哪些，插入哪些
      minify: { // 此处的minify为第三方包html-minify
        collapseWhitespace: true, // 删除空格
        removeComments: true, // 删除注释
      }
    }),
    // new HtmlInlineChunkPlugin({
    //   inlineChunks: ['manifest']
    // }),
    // 剔除没有用到多余的css样式， css tree shaking
    new PurifyCss({
      // 这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
      paths: glob.sync([
        path.join(__dirname, './*.html'),
        path.join(__dirname, './src/*.js')
      ]),
      // paths: glob.sync(path.join(__dirname, './*.html'))
    }),
    new CleanWebpackPlugin(['dist']),
    // 使用ProvidePlugin将特定的文件打包，全局可以使用key访问到
    // new webpack.ProvidePlugin({
    //   "$": "jquery",
    //   "d3": "d3"
    // })
    // js tree shaking, 测试UglifyJsPlugin后没有效果， mode production压缩js才有效果
    // new UglifyJsPlugin(), // webpack 4.x后 可以使用 --mode production 进行压缩
    //  webpack.optimize.UglifyJsPlugin has been removed
    // new webpack.optimize.UglifyJsPlugin({
    //   minimize: false
    // })
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]
}